<template>
  <a-config-provider
    :locale="locale"
    :auto-insert-space-in-button="false"
    :get-popup-container="getPopupContainer"
  >
    <slot />
  </a-config-provider>
</template>
<script lang="ts">
import { State } from 'vuex-class'
import { Vue, Component, Watch } from 'vue-property-decorator'
import moment from 'moment'
import 'moment/locale/zh-cn'

import { LangType } from '~/locales'

moment.locale('en')

@Component
export default class AppWrapper extends Vue {
  @State('lang', { namespace: 'app' })
  private lang!: LangType

  private locale: any = null
  private enUS: any = null
  private zhCN: any = null

  private mounted () {
    this.enUS = require('ant-design-vue/es/locale/en_US.js').default
    this.zhCN = require('ant-design-vue/es/locale/zh_CN.js').default
    this.setAppLocale()
  }

  // eslint-disable-next-line
  getPopupContainer (el: HTMLElement, dialogContext: any): HTMLElement {
    if (dialogContext) {
      return dialogContext.getDialogWrap()
    } else {
      return document.body
    }
  }

  @Watch('lang')
  private watchLang () {
    this.setAppLocale()
  }

  private setAppLocale () {
    if (this.lang === 'zh') {
      this.locale = this.zhCN
      moment.locale('zh-cn')
    } else {
      this.locale = this.enUS
      moment.locale('en')
    }
  }
}
</script>
